<template>
  <el-form :model="registerForm" :rules="rules" ref="Form" label-width="100px" style="background-color: #d5d5d5" size="default" class="login-form">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="registerForm.name"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="age">
      <el-radio-group v-model="registerForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生日期" prop="date">
      <el-date-picker
          v-model="registerForm.date"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="文化程度" prop="education">
      <el-select v-model="registerForm.education" placeholder="请选择文化程度">
        <el-option label="小学" value="小学"></el-option>
        <el-option label="初中" value="初中"></el-option>
        <el-option label="高中" value="高中"></el-option>
        <el-option label="大学" value="大学"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所在省份" prop="province">
      <el-select v-model="registerForm.province" placeholder="请选择所在省份">
        <el-option label="山东" value="山东"></el-option>
        <el-option label="北京" value="北京"></el-option>
        <el-option label="上海" value="上海"></el-option>
        <el-option label="吉林" value="吉林"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="联系地址" prop="address">
      <el-input v-model="registerForm.address"></el-input>
    </el-form-item>
    <el-form-item label="邮政编码" prop="code">
      <el-input v-model="registerForm.code"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="registerForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="registerForm.email"></el-input>
    </el-form-item>
    <el-form-item label="类别" prop="category">
      <el-select v-model="registerForm.category" placeholder="请选择类别">
        <el-option label="函授" value="函授"></el-option>
        <el-option label="类别二" value="2"></el-option>
        <el-option label="类别三" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input type="textarea" v-model="registerForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">立即注册</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {computed, reactive} from "vue";
import useUserStore from "@/store/modules/user";
import Cookies from "js-cookie";

const userStore = useUserStore()

const { proxy } = getCurrentInstance();
const router = useRouter();
// 注册表单 获取自pinia库
const registerForm = computed(()=> {
  return userStore.registerFormMain
})
const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  date: [
    { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择文化程度', trigger: 'change' }
  ],
  province: [
    { required: true, message: '请选择所在省份', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入联系地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入邮政编码', trigger: 'blur' },
  ],
  phone: [
    {  required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  category: [
    { required: true, message: '请选择类别', trigger: 'change' }
  ],
  level: [
    { required: true, message: '请选择报考层次', trigger: 'change' }
  ],
  speciality: [
    { required: true, message: '请选择报考专业', trigger: 'change' }
  ],
  desc: [
    { required: false, message: '请填写备注', trigger: 'blur' }
  ]
})
function submitForm() {
  proxy.$refs.Form.validate((valid,error) => {
    if (valid) { // 校验成功
      sessionStorage.setItem('registerForm', JSON.stringify(registerForm.value));
      router.push({ path: "/register-success" });
    } else { // 失败
      // sessionStorage.setItem('registerForm', JSON.stringify(registerForm.value));
      // router.push({ path: "/register-success" });
      alert('失败！');
      return false;
    }
  })
}
function resetForm() {
  proxy.$refs.Form.resetFields();
}

</script>

<style lang="scss" scoped>
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 70%;
  margin: 2% 15%;
  padding: 25px 25px 5px 25px;
.el-input {
  height: 40px;
input {
  height: 40px;
}
}
.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 0px;
}
}
</style>
